import React, { Component } from 'react'
import { ScrollView, StyleSheet } from 'react-native'
import { inject, observer } from 'mobx-react/native'
import { Grid } from 'antd-mobile'
import { Icon } from '../components'
import { variables } from '../styles'

const grids = role => {
  const table = {}
  const defaults = [
    // { name: 'Search', icon: 'search' },
    { name: 'Items', icon: 'ribbon' },
    { name: 'Orders', icon: 'ribbon' },
  ]
  return (table[role.toLowerCase()] || defaults).map(x => ({
    ...x,
    text: x.text || x.name,
    icon: (
      <Icon
        name={x.icon}
        size={variables.icon_size_lg}
        color={variables.color_text_caption}
      />
    ),
  }))
}

@inject('actions', 'store')
@observer
export class HomeScreen extends Component {
  render = () => (
    <ScrollView style={styles.container}>
      <Grid
        data={grids(this.props.store.user.role)}
        hasLine={false}
        onClick={({ name, params }) =>
          this.props.navigation.navigate(name, params)
        }
      />
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: variables.v_spacing_md,
  },
})
